<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px"
        >
            <el-breadcrumb-item>
                <i class=" el-icon-coin"></i>
                科研库管理
            </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="main-container">
            <el-form
                :model="filterForm"
                label-width="100px"
            >
                <el-row>
                    <el-col :span="6">
                        <el-form-item
                            label="科研库编号"
                            prop="researchLibrariesNumber"
                        >
                            <el-input
                                v-model="filterForm.researchLibrariesNumber"
                                placeholder="请输入科研库编号"
                                class="input-form"
                                size="mini"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                            label="科研库名称"
                            prop="researchLibrariesName"
                        >
                            <el-input
                                v-model="filterForm.researchLibrariesName"
                                placeholder="请输入科研库名称"
                                class="input-form"
                                size="mini"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="创建时间">
                            <el-date-picker
                                v-model="filterForm.createTime"
                                type="datetime"
                                placeholder="请选择创建时间"
                                class="picker-form"
                                size="mini"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束时间">
                            <el-date-picker
                                v-model="filterForm.endTime"
                                type="datetime"
                                placeholder="请选择结束时间"
                                class="picker-form"
                                size="mini"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                            label="科研负责人"
                            prop="usersIds "
                        >

                            <el-select
                                v-model="filterForm.usersIds"
                                multiple
                                placeholder="请选择科研负责人"
                                clearable
                                class="picker-form"
                                size="mini"
                            >
                                <el-option
                                    v-for="item in usersIdsList"
                                    :key="item.scanId"
                                    :label="item.scanName"
                                    :value="item.scanId"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                            label="课题编号"
                            prop="subjectNumber"
                        >
                            <el-input
                                v-model="filterForm.subjectNumber"
                                placeholder="请输入科研库课题编号"
                                class="input-form"
                                size="mini"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                            label="课题名称"
                            prop="subjectName"
                        >
                            <el-input
                                v-model="filterForm.subjectName"
                                placeholder="请输入科研库课题名称"
                                class="input-form"
                                size="mini"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="课题类别">
                            <el-select
                                v-model="filterForm.subjectCategory"
                                placeholder="请选择课题类别"
                                clearable
                                class="picker-form"
                                size="mini"
                            >
                                <el-option
                                    v-for="item in subjectCategoryList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                            label="课题负责人"
                            prop="subjectPrincipal"
                        >
                            <el-select
                                v-model="filterForm.subjectPrincipal"
                                placeholder="请选择课题负责人"
                                clearable
                                class="picker-form"
                                size="mini"
                            >
                                <el-option
                                    v-for="item in usersIdsList"
                                    :key="item.scanId"
                                    :label="item.scanName"
                                    :value="item.scanId"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                            label="是否结题"
                            prop="isConcluding"
                        >
                            <el-select
                                v-model="filterForm.isConcluding"
                                placeholder="请选择是否结题"
                                clearable
                                class="picker-form"
                                size="mini"
                            >
                                <el-option
                                    v-for="item in isConcludingList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col
                        :span="2"
                        :offset="6"
                    >
                        <el-form-item>
                            <el-button
                                type="primary"
                                size="mini"
                                @click="createScienceLibraries"
                            >创建</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item>
                            <el-button
                                type="primary"
                                size="mini"
                                @click="search"
                            >搜索</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <base-table
                        :data="scienceManagerTable.data"
                        :header="scienceManagerTable.header"
                        :operation="scienceManagerTable.operation"
                        :pageInfo="scienceManagerTable.pageInfo"
                        :cellStyleFunc="diagnosisTableCellStyleFunc"
                        @handleClick="scienceManagerTableButtonClick"
                        @pageJumpTo="scienceManagerTablePageJumpTo"
                        @sizeChange="scienceManagerTableSizeChange"
                    >
                    </base-table>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import BaseTable from '@templates/components/BaseTable';
import { itemsPerPage } from '@/client/libs/util';
export default {
    name: 'scienceLibraries',
    components: {
        BaseTable,
    },
    data() {
        return {
            filterForm: {
                createEndTime: '', //创建开始时间
                createStartTime: '', //创建结束时间
                researchLibrariesName: '', //科研库名称
                researchLibrariesNumber: '', //科研库编号
                subjectCategory: '', //课题类别(字典),传ID
                subjectName: '', //课题名称
                subjectNumber: '', //课题编号
                subjectPrincipal: '', //课题负责人,传ID
                usersId: '', //科研库负责人Id
                isConcluding: '', //是否结题
            },
            scienceManagerTable: {
                data: [],
                header: [
                    {
                        label: '科研库编号',
                        prop: 'researchLibrariesNumber',
                    },
                    {
                        label: '科研库名称',
                        prop: 'researchLibrariesName',
                    },
                    {
                        label: '科研负责人',
                        isRender: true,
                        render: (h, params) => {
                            let usersName = '';
                            if (params.row.userIdAndNameOfList) {
                                params.row.userIdAndNameOfList.forEach(
                                    (item) => {
                                        if (item.scanName == null) {
                                        } else {
                                            usersName =
                                                usersName + item.scanName + ' ';
                                        }
                                    }
                                );
                            }
                            return h('span', usersName);
                        },
                    },
                    {
                        label: '课题编号',
                        prop: 'subjectNumber',
                    },
                    {
                        label: '课题名称',
                        prop: 'subjectName',
                    },
                    {
                        label: '课题类别',
                        prop: 'subjectCategoryName',
                    },
                    {
                        label: '课题负责人',
                        prop: 'subjectPrincipalName',
                    },
                    {
                        label: '创建时间',
                        prop: 'createTime',
                    },
                    {
                        label: '结束时间',
                        prop: 'researchLibrariesEndTime',
                    },
                    {
                        label: '科研合作单位',
                        prop: 'researchLibrariesCooperator',
                        width: '115',
                    },
                    {
                        label: '是否结题',
                        prop: 'isConcludingText',
                    },
                    {
                        label: '备注',
                        prop: 'researchLibrariesRemark',
                    },
                ],
                operation: [
                    {
                        label: '删除',
                        functionKey: 'deleteResearchLibraries',
                        color: 'red',
                    },
                    {
                        label: '详情',
                        functionKey: 'editResearchLibraries',
                    },
                    {
                        label: '切片集',
                        functionKey: 'watchSlices',
                    },
                    {
                        label: '切片入库',
                        functionKey: 'addSlicesToLibraries',
                    },
                ],
                // 分页信息
                pageInfo: {
                    size: itemsPerPage.get(),
                    page: 1,
                    total: 0,
                },
            },
            dictRequestMap: [
                {
                    code: 'subjectCategory',
                    arrayKey: 'subjectCategoryList',
                },
            ],
            subjectCategoryList: [],
            usersIdsList: [],
            isConcludingList: [
                { id: 0, name: '否' },
                { id: 1, name: '是' },
            ],
        };
    },
    mounted() {
        this.dictionariesRequest();
        this.getScienceManagerTableData();
        this.getUsers();
    },
    methods: {
        checkPermission(row) {
            const { state } = this.$store;
            let userPermission = null;
            if (row.usersIds === null) {
                if (state.user.id == 1) {
                    return true;
                }
            } else {
                return (userPermission = row.usersIds.some((item) => {
                    return item == state.user.id || state.user.id == 1;
                }));
            }
        },

        deleteResearchLibraries(row) {
            const userPermission = this.checkPermission(row);
            if (userPermission) {
                this.$confirm('此操作将永久删除该科研库, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$axios({
                            method: 'DELETE',
                            url: `/PROXY-Remote/biopsyResearchLibraries/delete/by/${row.id}`,
                        }).then((res) => {
                            if (res && res.data.code === 200) {
                                this.$message.success('删除成功');
                                this.getScienceManagerTableData();
                            } else if (res.data.code === 409) {
                                this.$message.success('有切片不可以删除');
                            }
                        });
                    })
                    .catch(() => {
                        this.$message.info('已取消删除');
                    });
            } else {
                this.$message.info('您没有权限操作此条记录');
            }
        },
        editResearchLibraries(row) {
            const userPermission = this.checkPermission(row);
            if (userPermission) {
                this.$router.push({
                    path: '/scienceManage/createScienceLibraries',
                    query: { biopsyResearchLibrariesId: row.id },
                });
            } else {
                this.$message.info('您没有权限操作此条记录');
            }
        },
        watchSlices(row) {
            const userPermission = this.checkPermission(row);
            if (userPermission) {
                this.$router.push({
                    path: '/scienceManage/slicesOfKeYanLibraries',
                    query: {
                        biopsyResearchLibrariesId: row.id,
                        isConcluding: row.isConcluding,
                    },
                });
            } else {
                this.$message.info('您没有权限操作此条记录');
            }
        },
        addSlicesToLibraries(row) {
            const userPermission = this.checkPermission(row);
            if (userPermission) {
                if (row.isConcluding === 1) {
                    this.$message.info('已经结题');
                } else {
                    this.$router.push({
                        path: '/scienceManage/addSlicesToLibraries',
                        query: { biopsyResearchLibrariesId: row.id },
                    });
                }
            } else {
                this.$message.info('您没有权限操作此条记录');
            }
        },
        search() {
            this.getScienceManagerTableData();
        },
        getUsers() {
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/users/searchUserIdAndName/forBiopsyResearchLibraries',
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.usersIdsList = res.data.data;
                }
            });
        },
        getScienceManagerTableData() {
            this.filterForm.page = this.scienceManagerTable.pageInfo.page - 1;
            this.filterForm.size = this.scienceManagerTable.pageInfo.size;
            this.$axios({
                method: 'POST',
                url: '/PROXY-Remote/biopsyResearchLibraries/findAll',
                data: this.filterForm,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.scienceManagerTable.data = res.data.data;
                    this.scienceManagerTable.data.forEach((item) => {
                        item.isConcludingText =
                            item.isConcluding == 0
                                ? '否'
                                : item.isConcluding == 1
                                ? '是'
                                : '';
                        this.subjectCategoryList.forEach((it) => {
                            if (item.subjectCategory == it.id) {
                                item.subjectCategoryName = it.name;
                            }
                        });
                        this.usersIdsList.forEach((it) => {
                            if (item.subjectPrincipal == it.scanId) {
                                item.subjectPrincipalName = it.scanName;
                            }
                        });
                    });

                    this.scienceManagerTable.pageInfo.page =
                        res.data.pageInfo.page + 1;
                    this.scienceManagerTable.pageInfo.size =
                        res.data.pageInfo.size;
                    this.scienceManagerTable.pageInfo.total =
                        res.data.pageInfo.total;
                }
            });
        },
        createScienceLibraries() {
            this.$store.commit('setPropertyGeneral', {
                key: 'scienceLibraries',
                value: {
                    id: null,
                },
            });
            this.$router.push('/scienceManage/createScienceLibraries');
        },
        // 获取字典信息
        async dictionariesRequest() {
            await this.dictRequestMap.forEach((map) => {
                this.$axios({
                    method: 'GET',
                    url: '/PROXY-Remote/dicts/list',
                    params: {
                        code: map.code,
                        page: 0,
                        size: 99,
                    },
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this[map.arrayKey] = _.clone(res.data.data);
                    }
                });
            });
        },
        diagnosisTableCellStyleFunc({ row, column }) {
            const baseStyle = {
                padding: '3px 0',
                'border-right': '1px solid #ffffff',
                'font-size': '14px',
            };
            return baseStyle;
        },
        // 表格 - 按钮点击
        scienceManagerTableButtonClick(functionKey, row) {
            this[functionKey](row);
        },
        // 分页跳转
        scienceManagerTablePageJumpTo(val) {
            this.scienceManagerTable.pageInfo.page = val;
            this.getScienceManagerTableData();
        },
        // 每页显示数量改变
        scienceManagerTableSizeChange(val) {
            this.scienceManagerTable.pageInfo.size = val;
            this.getScienceManagerTableData();
        },
    },
};
</script>

<style scoped>
</style>